import React, {Component} from 'react'
import {connect} from 'react-redux'

import Header from "../components/header"
import TimeChoose from "../components/timechoose"

import { List,Toast,PullToRefresh} from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;
import {loadChargeRecord, loadChargeWithdraw} from "../redux/actions/userAction"
import {format} from "../utils/datetime"
class MoneyRecord extends Component {
  constructor (props){
   super(props)
   this.state= {
     day:10,
     pageNo:1,
     pageSize:10,
     changeinfo:[],
     withdrawinfo:[],
     title:"",
     time:{
      startTime:format(new Date(), 'Y-m-d'),
      endTime: format(new Date(new Date().getTime() + 1 * 24 * 60 * 60 * 1000), 'Y-m-d')
     },
     defaulthover:0,
     refreshing:false,
     isShow:[]
   }
}

menu(){
  return {
    alertTit:"类型选择",
    alertitems: [{
      title:"充值记录",
      key: "chargerecord"
    },{
      title:"提现记录",
      key: "chargewithdraw"
    }]
  }
}
tabsChoose=(key)=>{
  this.props.history.replace(key)
}
timeChkprops(props,beginTime,endTime,index){
  // console.log(index,"ffadf");
  this.setState({pageNo:1,time:{startTime:beginTime,endTime},changeinfo:[],defaulthover:index},()=>{
    this.chkprops(props,beginTime,endTime)
  })
}
chkprops(props,startTime,endTime,page){
  Toast.loading("数据加载中")
  const {dispatch,history,match,user} = props
  let {pageNo,pageSize} = page || this.state
  const {changeinfo,withdrawinfo}  = this.state
  const _this = this;
  if(match.params.key == "chargerecord"){
          this.setState({title:"充值记录"})
          dispatch(loadChargeRecord(startTime,endTime,page,pageSize,(ok,data)=>{
        ok? (data.list.length >0 ?( Toast.hide(), _this.setState({changeinfo:changeinfo.concat(data.list),refreshing: false})) : (_this.setState({refreshing: false}),Toast.fail("没有更多数据")))
       : (
          Toast.fail("数据加载失败",1), 
          history.replace("/my"))
    }))

  }else if(match.params.key == "chargewithdraw"){
    this.setState({title:"提现记录"})
    dispatch(loadChargeWithdraw(startTime,endTime,page,pageSize,(ok,data)=>{
          ok? (data.list.length >0 ?(Toast.hide(), _this.setState({changeinfo:changeinfo.concat(data.list),refreshing: false})) : (_this.setState({refreshing: false}),Toast.fail("没有更多数据"))): (
            Toast.fail("数据加载失败",1), 
            history.replace("/my"))
      }))
  }else{
    history.go("/my")
  }
}
componentWillMount(){
  const {startTime,endTime} = this.state.time
  this.chkprops(this.props,startTime,endTime)
}

componentWillReceiveProps(nextProps) {
    var startTime=format(new Date(), 'Y-m-d')
    var endTime = format(new Date(new Date().getTime() + 1 * 24 * 60 * 60 * 1000), 'Y-m-d')
  const {key} = nextProps.match.params
  if(key!= this.props.match.params.key){
    this.setState({
      changeinfo:[],
      time:{startTime,endTime},
      defaulthover:0
    },()=>this.chkprops(nextProps,startTime,endTime))
  }
}
show(index){
  const { isShow} = this.state
  var num = isShow.indexOf(index)
  num< 0 ? isShow.push(index) : isShow.splice(num,1)
  this.setState({
    isShow
  })
 }
  render() {
    const {changeinfo,title,time,defaulthover,pageNo} = this.state
    
    
   return <div className="record">
     <Header title={title} {...this.props} tabs={this.menu()} tabsChoose={this.tabsChoose}
      defaultradio={this.props.match.params.key == "chargerecord" ? 0 : 1 }></Header>
      <TimeChoose {...this.props}  time={time} defaulthover={defaulthover}  chkprops={this.timeChkprops.bind(this)}></TimeChoose>
{
  changeinfo.length != 0 ?
  <PullToRefresh
             ref={el => this.ptr = el}
              direction={'up'}
              refreshing={this.state.refreshing}
              style={{
                height:document.documentElement.clientHeight,
                overflow: 'auto',
              }}
              onRefresh={() => {
                this.setState({ refreshing: true ,pageNo: pageNo+1});
                // const that = this;
                // Toast.loading("数据加载中")
               this.chkprops(this.props,time.startTime,time.endTime,pageNo+1)

                // dispatch(loadOrderlist(this.orderType, pageNo+1,"",time.startTime,time.endTime,(ok,data)=>{
                //   ok? (data.list.length >0 ? (that.setState({orderlist:orderlist.concat(data.list),refreshing: false}),Toast.hide()) : (that.setState({refreshing: false}),Toast.hide(),Toast.fail("没有更多记录")) ) : (
                //     Toast.fail("数据加载失败",1), 
                //     history.go("/"))
                // }))
              }}
            >
            
     <List className="my-record">
     { 
       changeinfo.map((item,index)=>{
       return  <div className={this.state.isShow.indexOf(index)>-1? "recorditem downarrow" : "recorditem"} key={index}>
        {this.props.match.params.key == "chargerecord" ?  <div>
                <Item arrow="horizontal"
                  multipleLine
                  onClick={() => {this.show(index)}}
                >
                <div className="item-head">
                <h3>订单号：{item.hkOrder}</h3>
                <span></span>
                </div>
                <div className="item-money"><span>金额：{item.hkMoney}</span> <span></span></div>
                <div className="item-wanfa"><span>状态：{item.parsingStatus}</span> <span></span></div> 
                <div className="item-time"><span>{item.createTime}</span> <span></span></div>
                </Item>
                <div className={this.state.isShow.indexOf(index)>-1? "content" : "content hidden"}>
                  <h3 className="redfont">订单内容</h3>
                  <ul>
                    <li><span>订单号</span>{item.hkOrder}</li>
                    <li><span>金额</span>{item.hkMoney}</li>
                    <li><span>状态</span>{item.parsingStatus}</li>
                    <li><span>转入账户</span>{item.hkCompanyBank}</li>
                    <li><span>创建时间</span>{item.createTime}</li>
                    <li><span>提交时间</span>{item.hkCheckTime}</li>
                    <li><span>到账时间</span>{item.hkTime}</li>
                    <li><span>备注</span>{item.remark}</li>
                  </ul>
                </div></div>
                 : <div className="tixian">
                 <Item arrow="horizontal"
                 multipleLine
                 onClick={() => {this.show(index)}}
               >
               <div className="item-head">
               <h3>订单号：{item.userOrder}</h3>
               <span></span>
               </div>
               <div className="item-money"><span>金额：{item.userWithdrawMoney}</span> <span></span></div>
               <div className="item-wanfa"><span>状态：{item.parsingStatus}</span> <span></span></div> 
               <div className="item-time"><span>{item.createTime}</span> <span></span></div>
               </Item>
               <div className={this.state.isShow.indexOf(index)>-1? "content" : "content hidden"}>
                 <h3 className="redfont">订单内容</h3>
                 <ul>
                   <li><span>订单号</span> {item.userOrder}</li>
                   <li><span>金额</span>{item.userWithdrawMoney}</li>
                   <li><span>状态</span>{item.parsingStatus}</li>
                   <li><span>创建时间</span>{item.createTime}</li>
                   <li><span>审核时间</span>{item.checkTime}</li>
                  <li><span>备注</span>{item.remark}</li>
                 </ul>
               </div>
               </div>
                }
       </div>
        
     })  
     }
     </List>
     </PullToRefresh>: <div><p className="norecord">没有记录</p></div>
    }
      
   </div>
   }
}

function mapStateToProps(state) {
  return {
    user: state.user // gives our component access to state through props.My
  }
}
export default connect(mapStateToProps)(MoneyRecord)